<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="编译资源-mix" tabindex="-1"><a class="header-anchor" href="#编译资源-mix"><span>编译资源 (Mix)</span></a></h2>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#installation">安装 &amp; 设置</a></li>
<li><a href="#running-mix">运行 Mix</a></li>
<li><a href="#working-with-stylesheets">使用样式表</a>
<ul>
<li><a href="#less">Less</a></li>
<li><a href="#sass">Sass</a></li>
<li><a href="#stylus">Stylus</a></li>
<li><a href="#postcss">PostCSS</a></li>
<li><a href="#plain-css">Plain CSS</a></li>
<li><a href="#url-processing">URL 处理</a></li>
<li><a href="#css-source-maps">资源映射</a></li>
</ul>
</li>
<li><a href="#working-with-scripts">使用 JavaScript</a>
<ul>
<li><a href="#vendor-extraction">Vendor 提取</a></li>
<li><a href="#react">React</a></li>
<li><a href="#vanilla-js">Vanilla JS</a></li>
<li><a href="#custom-webpack-configuration">自定义 Webpack 配置</a></li>
</ul>
</li>
<li><a href="#copying-files-and-directories">复制文件 &amp; 目录</a></li>
<li><a href="#versioning-and-cache-busting">版本控制 / 缓存清除</a></li>
<li><a href="#browsersync-reloading">Browsersync 重新加载</a></li>
<li><a href="#environment-variables">环境变量</a></li>
<li><a href="#notifications">通知</a></li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p><a href="https://github.com/JeffreyWay/laravel-mix" target="_blank" rel="noopener noreferrer">Laravel Mix</a> 提供了定义 Webpack 构建步骤的 API，用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法，可以流畅地定义资源管道。例如：</p>
<p>如果对如何开始使用 Webpack 和资源编译感到困惑和不知所措，那么你一定会喜欢 Laravel Mix。但是，你不一定非要使用它来开发应用；可以使用你喜欢的任何资源管道工具，甚至干脆不用。</p>
<h2 id="安装-设置" tabindex="-1"><a class="header-anchor" href="#安装-设置"><span>安装 &amp; 设置</span></a></h2>
<h4 id="安装-node" tabindex="-1"><a class="header-anchor" href="#安装-node"><span>安装 Node</span></a></h4>
<p>在触发 Mix 之前，要先确保机器上已经安装了 Node.js 和 NPM。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">node <span class="token operator">-</span>v</span>
<span class="line">npm <span class="token operator">-</span>v</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>默认情况下， Laravel Homestead 包含了你需要的所有东西；不过如果你使用 Vagrant，你也能使用从 <a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer">它们的下载页面</a> 获取的更易用的图形化安装器安装最新版本的 Node 和 NPM。</p>
<h4 id="laravel-mix" tabindex="-1"><a class="header-anchor" href="#laravel-mix"><span>Laravel Mix</span></a></h4>
<p>剩下的事儿就是安装 Laravel Mix。在 Laravel 的纯净安装版中，可以在目录结构的根目录中找到 <code v-pre>package.json</code> 文件。默认的 <code v-pre>package.json</code> 文件包含了起步所需的所有东西，把它想像成 <code v-pre>composer.json</code> 文件，只不过它是定义 Node 的依赖项，而不是 PHP 的。通过运行如下命令来安装它引用的依赖：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="运行-mix" tabindex="-1"><a class="header-anchor" href="#运行-mix"><span>运行 Mix</span></a></h2>
<p>Mix 是 <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">Webpack</a> 的顶层配置，因此运行 Mix 任务，只需要执行一条包含在 Laravel 默认的 <code v-pre>package.json</code> 文件中的脚本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 运行 Mix 任务...</span></span>
<span class="line">npm run dev</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 运行所有的 Mix 任务并最小化输出结果...</span></span>
<span class="line">npm run production</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="监听资源变化" tabindex="-1"><a class="header-anchor" href="#监听资源变化"><span>监听资源变化</span></a></h4>
<p><code v-pre>npm run watch</code> 命令能够在终端持续运行并且监听相关文件的变化。一旦它发现改变，Webpack 将自动重新编译资源：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run watch</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你会发现在特定环境下，文件发生改变并不会促使 Webpack 更新。如果系统中出现这种情况，不妨考虑使用 <code v-pre>watch-poll</code> 命令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run watch<span class="token operator">-</span>poll</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="使用样式表" tabindex="-1"><a class="header-anchor" href="#使用样式表"><span>使用样式表</span></a></h2>
<p><code v-pre>webpack.mix.js</code> 文件所有资源编译的切入点。把它想像为 Webpack 的轻量级配置封装。Mix 任务可以与如何编译资源的配置一起被链式调用。</p>
<h3 id="less" tabindex="-1"><a class="header-anchor" href="#less"><span>Less</span></a></h3>
<p><code v-pre>less</code> 方法可用于将 <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> 编译成 CSS。下面的语句将 <code v-pre>app.less</code> 文件编译为 <code v-pre>public/css/app.css</code>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>可以通过多次调用 <code v-pre>less</code> 方法完成多文件编译：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/less/admin.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>如果希望自定义编译后的 CSS 文件名，可以把完整的文件路径作为传递给 <code v-pre>less</code> 方法的第二个参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/stylesheets/styles.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果需要覆盖 <a href="https://github.com/webpack-contrib/less-loader#options" target="_blank" rel="noopener noreferrer">隐含的 Less 插件选项</a> ，可以传递一个对象作为 <code v-pre>mix.less()</code> 的第三个参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">less</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/less/app.less'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    strictMath<span class="token punctuation">:</span> <span class="token constant boolean">true</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="sass" tabindex="-1"><a class="header-anchor" href="#sass"><span>Sass</span></a></h3>
<p><code v-pre>sass</code> 方法能将 <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">Sass</a> 编译成 CSS。可以像下面这样使用这个方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>和 <code v-pre>less</code> 方法类似，可以将多个 Sass 文件编译为各自的 CSS 文件，并为结果 CSS 自定义输出目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/sass/app.sass'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/sass/admin.sass'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css/admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>额外的 <a href="https://github.com/sass/node-sass#options" target="_blank" rel="noopener noreferrer">Node-Sass 插件选项</a> 可以作为第三个参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/sass/app.sass'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    precision<span class="token punctuation">:</span> <span class="token number">5</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="stylus" tabindex="-1"><a class="header-anchor" href="#stylus"><span>Stylus</span></a></h3>
<p>与 Less 和 Sass 相似， <code v-pre>stylus</code> 方法将 <a href="http://stylus-lang.com/" target="_blank" rel="noopener noreferrer">Stylus</a> 编译成 CSS：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">stylus</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/stylus/app.styl'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>还可以安装额外的 Stylus 插件，比如 <a href="https://github.com/jescalan/rupture" target="_blank" rel="noopener noreferrer">Rupture</a> 。先通过 NPM （<code v-pre>npm install rupture</code>）安装有插件，然后在调用 <code v-pre>mix.stylus()</code> 时包含它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">stylus</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/stylus/app.styl'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span><span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'rupture'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="postcss" tabindex="-1"><a class="header-anchor" href="#postcss"><span>PostCSS</span></a></h3>
<p><a href="https://postcss.org/" target="_blank" rel="noopener noreferrer">PostCSS</a> 是一个转换 CSS 的强力工具，它已经包含在 Laravel Mix 中。默认情况下，Mix 利用流行的 <a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener noreferrer">Autoprefixer</a> 插件自动附加所有必要的 CSS3 第三方前缀。不过，你可以自由添加应用中所需的任何附加插件。首先通过 NPM 安装所需插件，然后在 <code v-pre>webpack.mix.js</code> 文件引用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/sass/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">        postCss<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token keyword">require</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'postcss-css-variables'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">]</span></span>
<span class="line">   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="原生-css" tabindex="-1"><a class="header-anchor" href="#原生-css"><span>原生 CSS</span></a></h3>
<p>如果想要将几个原生 CSS 样式表合并到单个文件中，可以使用 <code v-pre>styles</code> 方法。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">styles</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/css/vendor/normalize.css'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/css/vendor/videojs.css'</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css/all.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="url-处理" tabindex="-1"><a class="header-anchor" href="#url-处理"><span>URL 处理</span></a></h3>
<p>因为是基于 Webpack 之上构建，了解几个 Webpack 概念就很重要了。对于 CSS 编译，Webpack 将重写和优化任何带有样式表的 <code v-pre>url()</code> 调用。虽然初听上去好像很奇怪，但这确实是个强大的功能。 想像一下我们想要编译包含图片相对 URL 的 Sass：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">.</span>example <span class="token punctuation">{</span></span>
<span class="line">    background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'../images/example.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>注意：任何给定 <code v-pre>url()</code> 的绝对路径将被排除在 URL 重写之外。例如 <code v-pre>url('/images/thing.png')</code> 或 <code v-pre>url('http://example.com/images/thing.png')</code> 将不会被修改。</p>
</blockquote>
<p>默认情况下，Laravel Mix 和 Webpack 将找到 <code v-pre>example.png</code>, 将其复制到 <code v-pre>public/images</code> 文件夹，然后重写生成的样式表中的 <code v-pre>url()</code>。如此一来，编译后的 CSS 将变成：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">.</span>example <span class="token punctuation">{</span></span>
<span class="line">    background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token operator">/</span>images<span class="token operator">/</span>example<span class="token operator">.</span>png<span class="token operator">?</span>d41d8cd98f00b204e9800998ecf8427e<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>尽管此功能可能很有用，但是已有文件夹结构可能已经按你的预期做了配置。这种情况下，你可以禁用 <code v-pre>url()</code> 重写：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/app/app.scss'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">options</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">      processCssUrls<span class="token punctuation">:</span> <span class="token constant boolean">false</span></span>
<span class="line">   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在 <code v-pre>webpack.mix.js</code> 文件中加入这项配置，Mix 将不再匹配任何 <code v-pre>url()</code> 或者复制资源到 public 目录。换句话说，编译后的 CSS 看上去和你原来输入的内容一样：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">.</span>example <span class="token punctuation">{</span></span>
<span class="line">    background<span class="token punctuation">:</span> <span class="token function">url</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"../images/thing.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="源码映射" tabindex="-1"><a class="header-anchor" href="#源码映射"><span>源码映射</span></a></h3>
<p>虽然默认情况下源码映射被禁用，但是可以通过在 <code v-pre>webpack.mix.js</code> 文件中调用 <code v-pre>mix.sourceMaps()</code> 方法来激活。尽管会提高编译/执行的成本，却可以在在编译资源时为浏览器开发工具提供额外的调试信息。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">sourceMaps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用-javascript" tabindex="-1"><a class="header-anchor" href="#使用-javascript"><span>使用 JavaScript</span></a></h2>
<p>Mix 提供了几个有助于使用 JavaScript 文件的特性，比如编译 ECMAScript 2015、模块打包、最小化和合并原生 JavaScript 文件。更棒的是，所有这些都无需配置就可以很好地工作。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>只需这一行代码，就可以支持：</p>
<ul>
<li>ES2015 语法</li>
<li>模块</li>
<li>编译 <code v-pre>.vue</code> 文件。</li>
<li>为生产环境最小化代码。</li>
</ul>
<h3 id="vendor-提取" tabindex="-1"><a class="header-anchor" href="#vendor-提取"><span>Vendor 提取</span></a></h3>
<p>将应用自身的 JavaScript 和第三方库绑定在一起有个潜在的缺点：会使长期缓存变得困难。例如，应用代码的单独更新将强制浏览器重新下载全部第三方库，即使第三方库没有发生变化。</p>
<p>如果你打算频繁地更新应用中的 JavaScript，应该考虑将第三方库提取到它自己的文件中。这样一来，应用代码的改变将不影响 <code v-pre>vendor.js</code> 文件缓存。Mix 的 <code v-pre>extract</code> 方法为之提供了便利：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">extract</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'vue'</span><span class="token punctuation">]</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>extract</code> 方法接受你想要提取到 <code v-pre>vendor.js</code> 的全部库或模块的数组作为参数。使用上面例子中的代码片段，Mix 将生成如下文件：</p>
<ul>
<li><code v-pre>public/js/manifest.js</code>: <em>Webpack 运行时清单</em></li>
<li><code v-pre>public/js/vendor.js</code>: <em>第三方库代码</em></li>
<li><code v-pre>public/js/app.js</code>: <em>应用代码</em></li>
</ul>
<p>为避免 JavaScript 错误，应确保按适应顺序加载这些文件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/js/manifest.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/js/vendor.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"/js/app.js"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="react" tabindex="-1"><a class="header-anchor" href="#react"><span>React</span></a></h3>
<p>Mix 能自动安装 React 支持所需的 Babel 插件。要达成此目的，只需要用 <code v-pre>mix.react()</code> 替换 <code v-pre>mix.js()</code> ：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/js/app.jsx'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>Mix 将在后台下载并包含适用的 <code v-pre>babel-preset-react</code> Babel 插件。</p>
<h3 id="vanilla-js" tabindex="-1"><a class="header-anchor" href="#vanilla-js"><span>Vanilla JS</span></a></h3>
<p>与利用 <code v-pre>mix.styles()</code> 整合样式表类似，你也可以使用 <code v-pre>scripts()</code> 方法整合并最小化任意数量的 JavaScript 文件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">scripts</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/js/admin.js'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'public/js/dashboard.js'</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js/all.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>对于不需要使用 Webpack 编译 JavaScript 的遗留代码，这个选项尤其有用。</p>
<blockquote>
<p>Tip： <code v-pre>mix.babel()</code> 是 <code v-pre>mix.scripts()</code> 的一个小变种。它的方法签名与 <code v-pre>scripts</code> 完全相同；但整合的文件将经由 Babel 编译，它会将 ES2015 代码转换为浏览器能够理解的 vanilla JavaScript。</p>
</blockquote>
<h3 id="自定义-webpack-配置" tabindex="-1"><a class="header-anchor" href="#自定义-webpack-配置"><span>自定义 Webpack 配置</span></a></h3>
<p>Lavarel Mix 在后台引用预先配置的 <code v-pre>webpack.config.js</code> 文件以加速启动和运行。有时，你可能需要手动编辑这个文件。你可能有一个特殊的加载器或插件需要引用，或者可能更愿意用 Stylus 代替 Sass。这种情况下，你有两个选择：</p>
<h4 id="合并自定义配置" tabindex="-1"><a class="header-anchor" href="#合并自定义配置"><span>合并自定义配置</span></a></h4>
<p>Mix 提供了 <code v-pre>webpackConfig</code> 方法来合并任意简短的 Webpack 配置以覆盖已有配置。这是个非常勾人的选择，因为它不要求你复制和维护你自己的 <code v-pre>webpack.config.js</code> 副本。 <code v-pre>webpackConfig</code> 方法接受一个对象作为作参数，它包含你想要应用的任何 <a href="https://webpack.js.org/configuration/" target="_blank" rel="noopener noreferrer">Webpack 特定配置</a> ：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">webpackConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">        modules<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">            path<span class="token operator">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string single-quoted-string">'vendor/laravel/spark/resources/assets/js'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">]</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="自定义配置文件" tabindex="-1"><a class="header-anchor" href="#自定义配置文件"><span>自定义配置文件</span></a></h4>
<p>如果你想完全自定义 Webpack 配置，将 <code v-pre>node_modules/laravel-mix/setup/webpack.config.js</code> 文件复制到项目的根目录。然后将 <code v-pre>package.json</code> 文件中所有的 <code v-pre>--config</code> 引用都指向新复制的配置文件。如果选择用这种方式自定义配置，Mix <code v-pre>webpack.config.js</code> 后续的任何更新，都必须手动合并到你的自定义配置文件中。</p>
<h2 id="复制文件-目录" tabindex="-1"><a class="header-anchor" href="#复制文件-目录"><span>复制文件 &amp; 目录</span></a></h2>
<p><code v-pre>copy</code> 方法可以用于将文件和目录复制到新位置。当 <code v-pre>node_modules</code> 目录中特殊的资源需要重新定位到 <code v-pre>public</code> 文件夹时，这个方法很有用。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">copy</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'node_modules/foo/bar.css'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/css/bar.css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>复制文件夹时， <code v-pre>copy</code> 方法将扁平化目录结构。想要保持目录的原始结构，需要使用 <code v-pre>copyDirectory</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">copyDirectory</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/img'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="版本管理-缓存销毁" tabindex="-1"><a class="header-anchor" href="#版本管理-缓存销毁"><span>版本管理 / 缓存销毁</span></a></h2>
<p>许多开发者在他们编译后的资源添加时间戳或唯一令牌作后缀，强制浏览器加载新的资源，以替换旧的代码副本。Mix 可以使用 <code v-pre>version</code> 方法替你处理它们。.</p>
<p><code v-pre>version</code> 方法自动在所有编译后的文件名后追加唯一的哈希值，从而实现更方便的缓存销毁：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span></span>
<span class="line">   <span class="token operator">.</span><span class="token function">version</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>在生成版本化文件后，你不会知道确切的文件名。因此，你需要在 <a href="https://learnku.com/docs/laravel/6.x/views" target="_blank" rel="noopener noreferrer">views</a> 中使用 Laravel 的全局 <code v-pre>mix</code> 函数载入相应的哈希资源。 <code v-pre>mix</code> 函数自动判断哈希文件的当前文件名：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string double-quoted-string">"{{ mix('/js/app.js') }}"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>通常在开发阶段不需要版本化文件，你可以仅在运行 <code v-pre>npm run production</code> 时执行版本化处理：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'public/js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span>mix<span class="token operator">.</span><span class="token function">inProduction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    mix<span class="token operator">.</span><span class="token function">version</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="browsersync-重加载" tabindex="-1"><a class="header-anchor" href="#browsersync-重加载"><span>Browsersync 重加载</span></a></h2>
<p><a href="https://browsersync.io/" target="_blank" rel="noopener noreferrer">BrowserSync</a> 能够自动监测文件变化，并且无需手动刷新就将变化注入到浏览器。可以调用 <code v-pre>mix.browserSync()</code> 方法开启此项支持：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">browserSync</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'my-domain.test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 或...</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// https://browsersync.io/docs/options</span></span>
<span class="line">mix<span class="token operator">.</span><span class="token function">browserSync</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    proxy<span class="token punctuation">:</span> <span class="token string single-quoted-string">'my-domain.test'</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以传递字符串（代理）或对象Y（BrowserSync 设置）给此方法。然后使用 <code v-pre>npm run watch</code> 命令启动 Webpack 的开发服务器。再编辑脚本或者 PHP 文件，就会看到浏览器立即刷新以响应你的修改。</p>
<h2 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量"><span>环境变量</span></a></h2>
<p>可以通过在 <code v-pre>.env</code> 文件中添加 <code v-pre>MIX_</code> 前缀，将环境变量注入到 Mix：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token constant">MIX_SENTRY_DSN_PUBLIC</span><span class="token operator">=</span>http<span class="token punctuation">:</span><span class="token comment">//example.com</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>一旦此变量被定义在 <code v-pre>.env</code> 文件中，就可以借助 <code v-pre>process.env</code> 对象访问它。如果在运行 <code v-pre>watch</code> 任务时这个值发生改变，就需要重启任务：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">process<span class="token operator">.</span>env<span class="token operator">.</span><span class="token constant">MIX_SENTRY_DSN_PUBLIC</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="通知" tabindex="-1"><a class="header-anchor" href="#通知"><span>通知</span></a></h2>
<p>如果可用，Mix 将自动为每次绑定显示操作系统通知。这将为你提供编译是否成功的实时反馈。不过，可能在某些情况下，你希望禁用通知。一个例子是在生产服务器上触发 Mix。通知可以借助 <code v-pre>disableNotifications</code> 方法来禁用。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">mix<span class="token operator">.</span><span class="token function">disableNotifications</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/6.x/mix/5150" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/mix...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/6.x/mix/5150" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/6.x/mix...</a></p>
</blockquote>
</div></template>


